<template>
    <el-container class="bg-page">
        <el-header style="height: 300px;">
            <img src="../../static/img/idx.jpg">
        </el-header>
    <el-main>
      <el-row :gutter="24" class="card_block">
        <el-col :span="5">
          <label class="input-label">手机号:</label>
        </el-col>
        <el-col :span="19">
          <el-input type="tel" v-model="phone" @blur="checkPhone"></el-input>
          <div v-if="isPhoneError" class="error-message">{{ phoneError }}</div>
        </el-col>
      </el-row>
  
      <el-row :gutter="24" class="card_block">
        <el-col :span="5">
          <label class="input-label">密码:</label>
        </el-col>
        <el-col :span="19">
          <el-input type="password" v-model="password" @blur="checkPassword"></el-input>
          <div v-if="isPasswordError" class="error-message">{{ passwordError }}</div>
        </el-col>
      </el-row>
  
      <el-row :gutter="24" class="card_block">
        <el-col :span="5">
          <label class="input-label">名字:</label>
        </el-col>
        <el-col :span="19">
          <el-input v-model="name" @blur="checkName"></el-input>
          <div v-if="isNameError" class="error-message">{{ nameError }}</div>
        </el-col>
      </el-row>

      <el-row :gutter="24" class="card_block">
        <el-col :span="5">
          <label class="input-label">邀请码:</label>
        </el-col>
        <el-col :span="19">
          <el-input v-model="invitation" @blur="checkInvitation"></el-input>
          <div v-if="isInvitationError" class="error-message">{{ invitationError }}</div>
        </el-col>
      </el-row>
  
      <el-row :gutter="24" class="card_block" style="display: flex; justify-content: flex-end;margin-top: 50pt;">
        <el-col :span="24">
          <button class="primary-btn" style="width: 100%;" @click="register">确定</button>
        </el-col>
      </el-row>
  
    </el-main>
    <el-footer>
        <img src="../../static/img/foot.png">
    </el-footer>
    </el-container>
  </template>
  
  <script>
  import Api from '../../api/api'
  export default {
    data() {
      return {
        phone: '',
        password: '',
        name: '',
        invitation:'',
        isPhoneError: false,
        phoneError: '',
        isPasswordError: false,
        passwordError: '',
        isNameError: false,
        nameError: '',
        isInvitationError:false,
        invitationError:'',
      }
    },
    methods: {
      // 验证手机号格式是否正确
      checkPhone() {
        const reg = /^1[3456789]\d{9}$/;
        if (!reg.test(this.phone)) {
          this.isPhoneError = true;
          this.phoneError = '请输入正确的手机号';
        } else {
          this.isPhoneError = false;
          this.phoneError = '';
        }
      },
      // 验证密码长度是否在6-50之间
      checkPassword() {
        if (this.password.length < 6 || this.password.length > 50) {
          this.isPasswordError = true;
          this.passwordError = '密码长度应为6-50位';
        } else {
          this.isPasswordError = false;
          this.passwordError = '';
        }
      },
      // 验证名字是否为空或包含特殊字符
      checkName() {
        if (this.name === '') {
          this.isNameError = true;
          this.nameError = '名字不能为空';
        } else {
          this.isNameError = false;
          this.nameError = '';
        }
      },
       // 验证名字是否为空或包含特殊字符
       checkInvitation() {
        if (this.invitation === '') {
          this.isInvitationError = true;
          this.invitationError = '邀请码不能为空';
        } else {
          this.isInvitationError = false;
          this.invitationError = '';
        }
      },
      register() {
        if (this.isPhoneError || this.isPasswordError || this.isNameError) {
          return; // 如果有验证失败的情况，不进行注册
        }
        let date = {
          phone: this.phone,
          name: this.name,
          password: this.password,
          role: '000000000000000000000001',
          status: '空闲',
          to_be_repaired: 0,
          being_repaired: 0,
        }
        Api.setToken(this.invitation)
        Api.createUser(date).then(response => {
          console.log(response.data)
          this.$message.success(response.data.message);
          setTimeout(function() {
                uni.reLaunch({ url: '/pages/login/login' })
		    }, 500); // 定时时间
          
        })
      }
    }
  };
  </script>

<style>
.content {
    text-align: center;
    height: 100%;
}

.card_block {
    text-align: center;
    background-color: white;
    margin-top: 10pt;
    border-radius: 10px;
}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: #99a9bf;
}

.bg-purple {
    background: #d3dce6;
}

.bg-purple-light {
    background: #e5e9f2;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.icon-button {
    background-color: #f5f5f5;
    border-radius: 4px;
    padding: 5pt;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.bg-page {
    text-align: center;
    background: #ffffff;
    padding: 0px;
    margin: 0px;
    height: 100vh;
}
.error-message {
  color: #ff4d4f;
  margin-top: 10px;
  font-size: small;
}
</style>
